<template>
	<up-search v-model="value" placeholder="请输入搜索关键词" @search="onSearch"></up-search>

	<up-tabs :list="list1" v-model:active="active" @click='onTabChange' class="custom-tabs" ></up-tabs>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	import myAxios from "@/plugins/myAxios"; // uni-app兼容的自定义axios

	const teamList = ref([]);
	const value = ref('')
	const searchText = ref("");
	const active = ref("public");
	const list1 = ref([{
			name: "公开",
			title: "public"
		},
		{
			name: "加密",
			title: "secret"
		},
	]);
	/**
	 * 加载队伍信息
	 * @param val
	 * @param state
	 * @returns {Promise<void>}
	 */
	const listTeam = async (val = "", state = 0) => {
		try {
			const res = await myAxios.get("/team/list/my/join", {
				params: {
					searchText: val,
					teamState: state,
				},
			});
			if (res && res.data) {
				teamList.value = res.data;
			} else {
				uni.showToast({
					title: "加载队伍失败",
					type: "error"
				});
			}
		} catch (error) {
			uni.showToast({
				title: "加载队伍失败",
				type: "error"
			});
		}
	};

	/**
	 * 队伍状态查询切换
	 * @param name
	 */
	const onTabChange = (name) => {
		console.log(name)
		if (name.title === "public") {
			active.value = "public";
			listTeam(searchText.value, 0);
		} else {
			active.value = "secret";
			listTeam(searchText.value, 2);
		}
	};

	/**
	 * 页面渲染时加载队伍
	 */
	onMounted(async () => {
		listTeam();
	});

	/**
	 * 关键词搜索队伍（队伍名+队伍描述）
	 */
	const onSearch = (val) => {
		listTeam(val);
	};
</script>

<style scoped>
	.floating-button {
	font-size: 200rpx;
	position: fixed;
	right: 4%;
	bottom: 4%;
	color: #078eff;
	z-index: 50;
	}

/* 	.custom-tabs {
		width: 100%;
		display: flex;
		justify-content: space-between !important;
	} */
	/* 使用 :deep() 穿透 scoped 样式 */  
	.custom-tabs :deep(.up-tabs__header) {
	    display: flex;
	    justify-content: space-around;
		color: pink;
	}
	
	.custom-tabs :deep(.up-tabs__header-item) {  
	    flex: 1;
	    text-align: center;
		color: pink !important;
	}
</style>